<template>
  <div class="c-bg-sgray c-pb100" :class="{'theme-market': showMarketingBar}">
    <div class="c-bg-white c-bd-b12-f5 c-p c-text-hidden" >
      <div class="c-w100 c-h c-text-hidden c-pa c-p-t0 bg-filter">
        <img class="c-w100 c-h " :src="socialInfo.avatar|| require('@/assets/defult270.png')" alt="">
      </div>
      <!-- <CoverImg coverSizeClass="c-w100 c-h c-text-hidden c-pa c-p-t0" :coverUrl="$addXossFilter(socialInfo.avatar, require('@/assets/defult270.png'))" /> -->
      <div class="c-pz1 c-p">
        <div class="c-pt76 c-p c-ph24  c-pz1">
          <div class="c-ww160 c-hh160 c-bd1-white c-text-hidden c-br16">
            <CoverImg coverSizeClass="c-w100 c-h c-text-hidden" :coverUrl="$addXossFilter(socialInfo.avatar, require('@/assets/defult270.png'))" />
          </div>
        </div>
        <div class="c-p c-bg-white c-pt80 c-mt-80 c-br-tr24 c-br-tl24 c-pb30">
          <div class="c-flex-row c-justify-center c-aligni-center c-pa c-p-r24 c-p-t28" v-if="socialInfo.isShowPeopleNumber">
            <div class="c-flex-row c-mr20">
              <div class="c-ww36 c-hh36 c-brp50 c-text-hidden c-bg-white"
                v-for="(item, index) in socialInfo.studentList" :key="index" v-if="index < 3" :class="index != 0?'c-ml-4':''">
                <img class="c-bd1-white c-ww36 c-hh36 c-brp50 c-text-hidden" :src="$addXossFilter(item.headimgurl,require('@/assets/defult_head.png'))" alt="" />
              </div>
              <div class="c-ww36 c-hh36 c-brp50 c-text-hidden c-bg-white c-ml-4" v-if="socialInfo.studentList&&socialInfo.studentList.length>0">
                <img class="c-bd1-white c-ww36 c-hh36 c-brp50 c-text-hidden" :src="$addXossFilter(require('@/assets/i/wap/clockIn/iconHead.png'))" alt="" />
              </div>
            </div>
            <div class="c-fs22 c-fc-xblack c-flex-row c-justify-center c-aligni-center">{{socialInfo.number}}人已加入</div>
          </div>
          <price-bar class="c-mt30" v-if="!(socialInfo.isFriendHelper
            || (socialInfo.collage && (socialInfo.collage.status == 2 || socialInfo.collage.status == 1))
            || socialInfo.needPwd == 1
            || socialInfo.isBuy == 1
            || socialInfo.isFull == 1
            || socialInfo.price * 1 == 0
            || (socialInfo.vipType == 2 && socialInfo.vipDiscount == 0)
            || (socialInfo.vipType == 4 && (socialInfo.svipDiscount == 0))
            || ((socialInfo.vipType == 3 || socialInfo.vipType > 4) && socialInfo.commonProdInfo && socialInfo.commonProdInfo.isAgent ==1 && Number(socialInfo.commonProdInfo.agentDiscount) == 0)
            || isSales)"
            :styleType="2"
            :dataInfo="socialInfo"
          >
          </price-bar>
          <div class="c-ph24">
            <flash-sales-time-new v-if="showMarketingBar"
              class="c-br20 c-text-hidden c-mt30"
              :type="socialInfo.sales? 'isSale':socialInfo.isFriendHelper ? 'isFa' : socialInfo.bargain ? 'isBargain' : 'isCollage'"
              :price="socialInfo.sales ? socialInfo.sales.price : socialInfo.collage ? socialInfo.collage.captainPrice : socialInfo.bargain ? socialInfo.bargain.reservePrice : ''"
              :from="socialInfo.collage && socialInfo.collage.collageGroupType && socialInfo.collage.collageGroupType == 2 ? 'activity' : ''"
              :startTime="socialInfo.sales ? socialInfo.sales.sales.startTime : socialInfo.bargain ? socialInfo.bargain.startTime : socialInfo.collage ? socialInfo.collage.startTime : socialInfo.faStartAt"
              :endTime="socialInfo.sales ? socialInfo.sales.sales.endTime : socialInfo.bargain ? socialInfo.bargain.endTime : socialInfo.collage ? socialInfo.collage.endTime : socialInfo.faEndAt"
              :originalPrice="socialInfo.price"
              :stock="socialInfo.sales ? socialInfo.sales.balance: ''"
              :stockBargain="socialInfo.bargain && socialInfo.bargain.stock"
              :isLimit="socialInfo.sales && socialInfo.sales.limit == 0 || (socialInfo.bargain && socialInfo.bargain.isLimitStock == 2) ? false : true" :salesTag="socialInfo.sales && socialInfo.sales.sales.tags"
              :peopleNum="socialInfo.collage && socialInfo.collage.peopleNum"
              :isPreheat="socialInfo.bargain && socialInfo.bargain.isPreheat"
              :bargainStatus="socialInfo.bargain && socialInfo.bargain.status"
              :optimal="optimal"
              @showCoupon="showCoupon = true"
              @falshSalesTime="falshSalesTime"
              @finishFlashSales="finishFlashSales"
            >
            </flash-sales-time-new>
          </div>
          <discount-info class="c-mt30" v-if="socialInfo.payType == 2&& socialInfo.isSaleOnly == 1 && !isiOS && !socialInfo.isBuy"
            :couponList="couponList"
            :dataInfo="socialInfo"
            :chainInfo="chainInfo"
            :isMarketing="isMarketing"
            @clickShowCoupon="showCoupon = true"
          >
          </discount-info>
          <vip-entry class="c-ph24 c-mt30"
            v-if="(!socialInfo.isFriendHelper || companyAuth.enableFriendHelper == 0) &&socialInfo.isSaleOnly == 1 &&!socialInfo.isBuy && !$isWxAppIos() && !isiOS"
            :dataInfo="socialInfo"
          ></vip-entry>
          <div class="c-pt28 c-ph24 c-lh42">
            <span class="c-fs32 socail-name c-fw600">{{socialInfo.name}}</span>
          </div>
          <div v-if="socialInfo && socialInfo.effectiveProd" class="c-pt20 c-ph24">
            <valid-time-com :prodId="socialInfo.socialRoomId" :dataInfo="socialInfo" :prodType="10"></valid-time-com>
          </div>
        </div>
        <!-- 非强制表单入口 -->
        <formEntry v-if="socialInfo.isBuy==1 && (socialInfo.userRole * 1 < 2 && ((socialInfo.collectPage==3&& socialInfo.isRelForm == true && socialInfo.hasFormLog == false && isShowFormlg)||(socialInfo.hasFormLog&&socialInfo.enableEdit==2&& isShowFormlg&& socialInfo.isRelForm == true)))"
          relType="16"  :relId="socialInfo.socialRoomId"  :dataInfo="socialInfo"
          classObject="c-fs22" fontSizeClass="c-fs20" iconSizeClass="c-fs14" topClass="c-bd-t12-f5"
          @goForm="goForm" ></formEntry>
        <bargain-rules v-if="socialInfo.bargain != null && !socialInfo.isBuy" :isPreheat="socialInfo.bargain.isPreheat" :status="socialInfo.bargain.status" class="c-bd-t12-f5"></bargain-rules>
      </div>
    </div>
    <collage-persons-list class="c-p c-bd-b10-f5" v-if="socialInfo && !socialInfo.isBuy && !((socialInfo.vipType == 2 && socialInfo.vipDiscount == 0) || (socialInfo.vipType == 4 && (socialInfo.svipDiscount == 0)) || ((socialInfo.vipType == 3 || socialInfo.vipType > 4) && socialInfo.commonProdInfo && socialInfo.commonProdInfo.isAgent ==1 && Number(socialInfo.commonProdInfo.agentDiscount) == 0)) && !socialInfo.isEnroll && socialInfo.collage && (socialInfo.collage.status == 2 || socialInfo.collage.status == 1)" :collage="socialInfo.collage" @goCollageDetail="gcd"></collage-persons-list>
    <!-- 搭配学习 -->
    <!-- <section v-if="relatedList.length > 0" class="c-pv30 c-bg-white c-ph24 c-bd-b20-f5">
      <div class="c-pb20 c-flex-row c-justify-sb c-aligni-end">
        <div>
          <span class="c-fs24">搭配学习</span>
          <span class="c-fs20 theme-fc c-pl20">加入社群，即可免费学习</span>
        </div>
      </div>
      <related-item :relatedList="relatedList" :isBuy="socialInfo.isBuy" :needPwd="socialInfo.needPwd"></related-item>
    </section> -->

    <section class="c-pb30 c-bg-white">
      <my-small-tabbar class="c-ph24" :styleType="2" :isNew="true" :tabList="tabList" :tabIndex="typeBar" @changeTab="changeType"></my-small-tabbar>

      <div class="c-pt20 c-fs24 c-fc-xblack c-ph24" v-show="typeBar == 0">
        <div class="c-lh40 c-fs26 c-fw600">社群简介</div>
        <div class="c-lh40 c-mt10">{{socialInfo.intro}}</div>
        <div class="c-lh40 c-pt30" v-if="socialInfo.guide != '' && socialInfo.guide != null">
          <div class="c-fs26 c-fw600">{{socialInfo.title}}</div>
          <pre class="room-guide c-lh40 c-mt10">{{socialInfo.guide}}</pre>
        </div>
      </div>
      <div class="c-bg-white" v-show="typeBar == 1">
        <package-index-com v-if="packageList.length > 0 && companyAuth.enableComboModule == 1" :showAll="true" :proType="7" :proId="sId" :isHomePage="false" :packageList="packageList"></package-index-com>
        <loading-status-tem :noData="packageList.length <= 0 || companyAuth.enableComboModule != 1" :noDataText="'暂无内容'"></loading-status-tem>
      </div>
    </section>

    <!-- <div class="c-flex-row c-flex-center c-pf c-p-r0 invite-friend " @click="goSpread" v-if="!socialInfo.isFriendHelper && !socialInfo.collage && !socialInfo.sales && !socialInfo.bargain">
      <div class="c-ww20 c-flex-column c-aligni-center">
        <img :src="require('../../../assets/i/wap/course/btn_share.png')" class="yqAnimation c-hh20 img-pe-none" />
      </div>
      <span class="c-fs20 c-pl5" :class="socialInfo.commission ? 'theme-fc':''">{{socialInfo.commission ? '邀请赚￥' + socialInfo.commission : '邀请好友'}}</span>
    </div> -->
    <!-- 活动海报 -->
    <!-- <div class="c-flex-row c-flex-center c-pf c-p-r0 invite-friend " @click="invitePoster" v-else>
      <img :src="require('../../../../public/i/wap/spread/poster-share.png')" class="c-ww24 c-hh28 img-pe-none" />
      <span class="c-fs20 c-pl5">活动海报</span>
    </div> -->

    <bottom-buy-com
      :ckFrom="10"
      :isNeedPay="socialInfo.isBuy == 0 && socialInfo.needPwd == -1 && (socialInfo.price * 1 > 0 || socialInfo.isSaleTogether == 1)"
      :showBuyButton="socialInfo.isBuy == 0 && socialInfo.needPwd == -1 && socialInfo.isFull != 1 && socialInfo.price * 1 > 0 && !((socialInfo.vipType == 2 && socialInfo.vipDiscount == 0) || (socialInfo.vipType == 4 && (socialInfo.svipDiscount == 0)) || ((socialInfo.vipType == 3 || socialInfo.vipType > 4) && socialInfo.commonProdInfo && socialInfo.commonProdInfo.isAgent ==1 && Number(socialInfo.commonProdInfo.agentDiscount) == 0))"
      :showFriendHelper="socialInfo.isFriendHelper && !((socialInfo.vipType == 2 && socialInfo.vipDiscount == 0) || (socialInfo.vipType == 4 && (socialInfo.svipDiscount == 0)) || ((socialInfo.vipType == 3 || socialInfo.vipType > 4) && socialInfo.commonProdInfo && socialInfo.commonProdInfo.isAgent ==1 && Number(socialInfo.commonProdInfo.agentDiscount) == 0)) && socialInfo.isBuy != 1"
      :friendHelperStatus="faStatus"
      @goHelpDetail="goHelpDetail"
    >
      <div class="btn-wrap c-fs28 c-lh c-w0 c-flex-grow1 c-flex-row">
        <div v-if="socialInfo.needPwd == 1 && socialInfo.isBuy == 0 && socialInfo.isFull != 1" @click="clickEnterPwd" class="theme-bg c-fc-white c-lh c-flex-grow1 c-flex-row c-flex-center c-hh72 c-br36 c-fs24">
          输入密码进入
        </div>
        <template v-else-if="socialInfo.isBuy != 1 && socialInfo.price * 1 > 0">
          <div v-if="!((socialInfo.isFriendHelper == true && companyAuth.enableFriendHelper == 1) ||
            (socialInfo.collage && (socialInfo.collage.status == 2 || socialInfo.collage.status == 1))||
            (socialInfo.bargain && ((socialInfo.bargain.status == 1 && socialInfo.bargain.isPreheat == 1) || socialInfo.bargain.status == 2)))" class="c-hh64 c-flex-column c-flex-center c-w0 c-flex-grow1" @click="clickBuyNow">
            <span class="c-fs20 c-lh c-mt4">立即购买</span>
          </div>
          <div v-if="socialInfo.collage && (socialInfo.collage.status == 2 || socialInfo.collage.status == 1) && socialInfo.collage.userType != -1 && !((socialInfo.vipType == 2 && socialInfo.vipDiscount == 0) || (socialInfo.vipType == 4 && (socialInfo.svipDiscount == 0)) || ((socialInfo.vipType == 3 || socialInfo.vipType > 4) && socialInfo.commonProdInfo && socialInfo.commonProdInfo.isAgent ==1 && Number(socialInfo.commonProdInfo.agentDiscount) == 0)) && socialInfo.isBuy != 1" class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" @click="goCollageDetail(socialInfo.collage.groupId,socialInfo.collage.collageId)">拼团中...</div>
          <template v-else-if="((socialInfo.isFriendHelper == true && companyAuth.enableFriendHelper == 1) ||
            (socialInfo.collage && (socialInfo.collage.status == 2 || socialInfo.collage.status == 1))||
            (socialInfo.bargain && ((socialInfo.bargain.status == 1 && socialInfo.bargain.isPreheat == 1) || socialInfo.bargain.status == 2)))">
            <div class="c-flex-column c-hh64 c-aligni-center c-fc-white c-justify-center c-w100 theme-bg" @click="clickBuyNow">
              <span class="c-fs20 c-lh">{{getBuyBtnTitle}}</span>
              <span class="c-fs22 c-lh c-mt4"><span class="c-fs20">{{'￥' | iosPriceFilter()}}</span>{{calculationPrice}}</span>
            </div>
            <div v-if="socialInfo.isFriendHelper && !((socialInfo.vipType == 2 && socialInfo.vipDiscount == 0) || (socialInfo.vipType == 4 && (socialInfo.svipDiscount == 0)) || ((socialInfo.vipType == 3 || socialInfo.vipType > 4) && socialInfo.commonProdInfo && socialInfo.commonProdInfo.isAgent ==1 && Number(socialInfo.commonProdInfo.agentDiscount) == 0)) && socialInfo.isBuy != 1" @click="goHelpDetail" class="c-ww220 c-flex-row c-flex-center c-hh72 c-br36 c-fs24" :class="faStatus == 1 ? 'c-fc-sgray c-bd1-ccc' : 'theme-fc theme-bd1'">
              助力领取
            </div>
            <div v-if="socialInfo.collage && (socialInfo.collage.status == 2 || socialInfo.collage.status == 1) && socialInfo.collage.userType == -1 && !((socialInfo.vipType == 2 && socialInfo.vipDiscount == 0) || (socialInfo.vipType == 4 && (socialInfo.svipDiscount == 0)) || ((socialInfo.vipType == 3 || socialInfo.vipType > 4) && socialInfo.commonProdInfo && socialInfo.commonProdInfo.isAgent ==1 && Number(socialInfo.commonProdInfo.agentDiscount) == 0)) && socialInfo.isBuy != 1" @click="goBuy(-1,socialInfo.collage.collageId)" class="c-hh64 c-flex-column c-aligni-center c-fc-white c-justify-center c-w100 c-fs20 c-lh" :class="socialInfo.collage.status == 2 ? 'theme-bg' : 'c-bg-d7'">
              <span class="c-fs20 c-lh">发起拼团</span>
              <span class="c-fs22 c-lh c-mt4"><span class="c-fs20">{{'￥' | iosPriceFilter('Live')}}</span>{{Number(socialInfo.collage.captainPrice).toFixed(2)}}</span>
            </div>
            <!-- 未发起砍价 -->
            <template v-if="socialInfo.bargain != null && ((socialInfo.bargain.status == 1 && socialInfo.bargain.isPreheat == 1) || socialInfo.bargain.status == 2)&&socialInfo.bargain.userType == 1">
              <div class="c-flex-row c-flex-center c-fc-white c-hh64 c-w50 c-fs28 c-br32 theme-bg-gradient" @click="handleClickBargainDetail(socialInfo.bargain.bargainId)">正在砍价</div>
            </template>
            <template v-if="socialInfo.bargain != null && ((socialInfo.bargain.status == 1 && socialInfo.bargain.isPreheat == 1) || socialInfo.bargain.status == 2)&&socialInfo.bargain.userType == -1">
              <div class="c-hh64 c-flex-column c-aligni-center c-fc-white c-justify-center c-w100" :class="(socialInfo.bargain.status == 1 && socialInfo.bargain.isPreheat == 1) ? 'c-bg-d7' : 'theme-bg-gradient'" @click="handleClickBargainDetail(socialInfo.bargain.bargainId)">
                <span class="c-fs20 c-lh">砍价享</span>
                <span class="c-fs22 c-lh c-mt4"><span class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{Number(socialInfo.bargain.reservePrice).toFixed(2)}}</span>
              </div>
            </template>
          </template>
        </template>
        <!-- 已购买，不需要输入密码。直接进入 -->
        <div v-else-if="socialInfo.isBuy == 1" @click="clickGoIn" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-fs28">
          进入群聊
        </div>
        <!-- 未购买，社群已满 -->
        <div v-else-if="socialInfo.isBuy == 0 && socialInfo.isFull == 1" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-fs28">
          社群已满
        </div>
        <!-- 未购买，社群未满，不需要输入密码，价格为0-->
        <div v-else-if="socialInfo.isBuy == 0 && socialInfo.isFull != 1 && socialInfo.needPwd == -1 && socialInfo.price * 1 == 0" @click="clickGoIn" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-fs28">
          加入群聊
        </div>
        <!-- 未购买，社群未满，不需要输入密码,价格不为0 -->
        <div v-else-if="socialInfo.isBuy != 3" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-fs28" :class="socialInfo.point * 1 > 0 || socialInfo.vipDiscount != 100 || socialInfo.svipDiscount != 100 ? 'c-ww500' : 'c-ww460'">
          <div class="c-fs24 c-textAlign-c c-w100 c-h c-flex-row c-flex-center" @click="clickGoIn" v-if="(socialInfo.vipType == 2 && socialInfo.vipDiscount == 0) || (socialInfo.vipType == 4 && (socialInfo.svipDiscount == 0)) || ((socialInfo.vipType == 3 || socialInfo.vipType > 4) && socialInfo.commonProdInfo && socialInfo.commonProdInfo.isAgent ==1 && Number(socialInfo.commonProdInfo.agentDiscount) == 0)">
            加入群聊
          </div>
          <div v-else class="c-fs26 c-textAlign-c c-w100 c-h c-flex-row c-flex-center" @click="clickBuyNow">
            {{getBuyBtnTitle}}
          </div>
        </div>
      </div>
    </bottom-buy-com>
    <share-masker :isShowShare="isShowShare" v-if="isShowShare" @closeShare="isShowShare=false;"></share-masker>
    <comfirm-com :showPassword="showPassword" :noticeText="noticeText" :text="'输入密码进入社群'" :placeholderText="'请输入密码'" @changePsw="changePsw" @closePassword="showPassword = false" @submitPassword="submitPassword"></comfirm-com>
    <coupon-list-com
      @closeModal="closeModal"
      @getCouponList="getCouponList"
      :couponIsPage="couponIsPage"
      :couponLoading="couponLoading"
      :couponList="couponList"
      :showCoupon="showCoupon"
      :dataInfo="socialInfo"
      :isMarketing="isMarketing"
      :prodId="Number(sId)"
      :prodType="10"
      :sales="socialInfo.sales"
      :collage="socialInfo.collage"
    ></coupon-list-com>
    <offical-account v-if="socialInfo && socialInfo.bargain" :showAccountQcode="showAccountQcode" :desc="officalDesc" :imgSrc="$addXossFilter(mpQrcode)" @hideDialog="hideDialog"></offical-account>
    <cj-popup v-model="showStudyModal" position="bottom" round closeable v-if="packageList.length > 0" title="购买课程">
      <div class="c-ph24 c-fs22 c-fc-gray c-mt30 c-mb20">该内容属于多个关联课程里,不能单独购买,请从以下相关课程进行选购购买</div>
      <section class="c-pb10 c-bg-white">
        <package-index-com v-if="packageList.length > 0 && companyAuth.enableComboModule == 1" :showAll="true" :proType="7" :proId="sId" :isHomePage="false" :packageList="packageList" @goFirst="goFirst(packageList[0])"></package-index-com>
      </section>
    </cj-popup>
    <promote-income v-if="showProtoIncome && sId" :showInvitionCard="socialInfo.isInvite == 1 && !socialInfo.isFriendHelper && !socialInfo.collage && !socialInfo.sales && !socialInfo.bargain" :showMarketingCard="socialInfo.isFriendHelper || socialInfo.collage || socialInfo.sales || socialInfo.bargain" :prodId="sId" :prodType="cfrom.social" @goInvite="goSpread" @goMarketingPoster="invitePoster"></promote-income>
    <collage-grades ref="collageGrades" :relType='16' :refereeId="refereeId" :isRelForm="socialInfo.isRelForm && !socialInfo.hasFormLog" :extId="socialInfo.socialRoomId" :bindPhoneSetting="bindPhoneSetting" :goodsRoomId="goodsRoomId" :recRelateId="recRelateId" :recType="recType" :dataInfo="socialInfo"></collage-grades>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import shareMasker from "@/components/templates/common/shareMasker.vue";
import PackageIndexCom from "@/components/templates/packageIndexCom.vue";
import ComfirmCom from "@/components/templates/common/comfirmCom.vue";
import couponListCom from "@/components/templates/couponListCom.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import FlashSalesTimeNew from "@/components/templates/flashSalesTimeNew.vue";
import bottomBuyCom from "@/components/templates/common/bottomBuyCom.vue";
import CollagePersonsList from "@/components/templates/collage/collagePersonsList.vue";
import PriceBar from '@/components/templates/common/priceBar.vue';
import bargainRules from '@/components/templates/bargain/bargainRules';
import validTimeCom from "@/components/templates/common/validTimeCom.vue";
import officalAccount from '@/components/templates/common/officalAccount';
import PromoteIncome from '@/components/templates/common/promoteIncome.vue';
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import formEntry from "@/components/homePage/form/formEntry.vue"
import collageGrades from "@/components/templates/collage/collageGrades.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
import DiscountInfo from "@/components/templates/common/discountInfo.vue";
import VipEntry from "@/components/templates/common/vipEntry.vue";
let isClick = false;
const THEME_RGB_MAP = global.THEME_RGB_MAP;
// let inputScrollTop = 0;
export default {
  name: "SocialGroupInfo",
  components: {
    DiscountInfo,
    VipEntry,
    CoverImg,
    shareMasker,
    PackageIndexCom,
    ComfirmCom,
    couponListCom,
    MySmallTabbar,
    loadingStatusTem,
    FlashSalesTimeNew,
    bottomBuyCom,
    CollagePersonsList,
    PriceBar,
    bargainRules,
    officalAccount,
    PromoteIncome,
    validTimeCom,
    formEntry,
    collageGrades
  },
  props: [],

  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      isShowShare: false,
      showPassword: false, //显示密码输入
      // inputPwd: "", //密码输入框内容
      noticeText: "",
      socialInfo: {
        socialRoomId: "",
        jgChatRoomId: "",
        name: "",
        intro: "",
        avatar: "",
        number: 0,
        price: 1,
        isInvite: 1,
        vipDiscount: "100.00",
        svipDiscount: "100.00",
        vipType: 1,
        isBuy: 0,
        isFull: false,
        social: "",
        faStatus: 1,
        joinActivityInfo: []
      },
      sId: "",
      packageList: [],
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      showCoupon: false,
      couponList: [],
      couponIsPage: false,
      couponPage: 1,
      couponLoading: false,
      relatedList: [], //搭配学习列表
      totalPackaged: '', //搭配学习总条数
      tabList: [{
        title: '详情',
        index: 0,
      }, {
        title: '相关推荐',
        index: 1,
      }],
      typeBar: 0,
      showStudyModal: false,
      isSales: false,
      isShowFormlg:localStorage.getItem("showForm") == 1 ? true : false,
      isSalesBegin: false, // 判断限时购是否正在进行
      showAccountQcode: false,
      officalDesc: '关注我们后才可发起砍价哦',
      mpQrcode: '', //二维码图片
      bindPhoneSetting: null,
      cfrom: global.ckFrom,
      showProtoIncome: false,
      optimal: null, // 最低价格对象
      recRelateId: '',
      recType: ''
    };
  },
  created() {
    utilJs.appShare(this);
    let reIdArr = window.location.href.split("refereeId=");
    if (reIdArr.length > 1 && reIdArr[1]) {
      let rId = reIdArr[1].split("&").length > 0 ? reIdArr[1].split("&")[0] : reIdArr[1];
      window.localStorage.setItem("refereeId", rId);
    }
  },
  computed: {
    showMarketingBar() {
      return this.socialInfo &&
        (
          this.socialInfo.sales ||
          (this.socialInfo.bargain && ((this.socialInfo.bargain.status == 1 && this.socialInfo.bargain.isPreheat == 1) || this.socialInfo.bargain.status == 2)) ||
          (this.socialInfo.collage && (this.socialInfo.collage.status == 2 || this.socialInfo.collage.status == 1)) ||
          this.socialInfo.isFriendHelper
        )
    },
    // 获取按钮专享价名称
    getBuyBtnTitle() {
      if (this.optimal) {
        const agentName = utilJs.getCustNameMap();
        let btnTxt = '立即购买';
        let idDiscount = (this.vipType == 3 || this.vipType > 4) && this.socialInfo.commonProdInfo && this.socialInfo.commonProdInfo.agentDiscount < 100
          ? this.socialInfo.commonProdInfo.agentDiscount
          : (this.vipType == 4 && this.socialInfo.svipDiscount < 100)
            ? this.socialInfo.svipDiscount
            : (this.vipType == 2 && this.socialInfo.vipDiscount < 100)
              ? this.socialInfo.vipDiscount
              : 100
        let discountPrice = Number(this.socialInfo.price * idDiscount / 100).toFixed(2);
        btnTxt = discountPrice * 1 != this.socialInfo.price ? (this.vipType != 1 ? (this.vipType == 2 ? 'VIP专享价' : this.vipType == 4 ? 'SVIP专享价' : agentName[this.vipType] + '专享价') : '立即购买') : '立即购买';
        if (this.socialInfo.sales && this.optimal.optimalPriceType == 101) {
          btnTxt = '立即购买';
        }
        return btnTxt
      }
      return '立即购买'
    },
    //营销原价计算价格
    calculationPrice() {
      let idDiscount = (this.vipType == 3 || this.vipType > 4) && this.socialInfo.commonProdInfo && this.socialInfo.commonProdInfo.agentDiscount < 100
          ? this.socialInfo.commonProdInfo.agentDiscount
          : (this.vipType == 4 && this.socialInfo.svipDiscount < 100)
            ? this.socialInfo.svipDiscount
            : (this.vipType == 2 && this.socialInfo.vipDiscount < 100)
              ? this.socialInfo.vipDiscount
              : 100
      let calculationPrice = Number(this.socialInfo.price * idDiscount / 100).toFixed(2)
      return calculationPrice;
    },
    //单卖&&没有权限&&价格大于0&&（加入形式&&不是好友助力）&&（优惠券||vip svip折扣信息||积分抵扣）&&（是否参与营销）
    showDiscount() {
      let showdiscount = this.socialInfo.isSaleOnly != 0 && this.socialInfo.isBuy == 0 &&
      !((this.socialInfo.vipType == 2 && this.socialInfo.vipDiscount == 0) || (this.socialInfo.vipType == 4 && (this.socialInfo.svipDiscount == 0)) || ((this.socialInfo.vipType == 3 || this.socialInfo.vipType > 4) && this.socialInfo.commonProdInfo && this.socialInfo.commonProdInfo.isAgent == 1 && Number(this.socialInfo.commonProdInfo.agentDiscount) == 0)) &&
      Number(this.socialInfo.price) > 0 && !this.socialInfo.isFriendHelper
      return showdiscount
    },
    //是否是营销活动
    isMarketing() {
      let isMarketing = this.socialInfo && (this.socialInfo.sales || (this.socialInfo.bargain
          && ((this.socialInfo.bargain.status == 1 &&
            this.socialInfo.bargain.isPreheat == 1) || this.socialInfo.bargain.status == 2)) || (this.socialInfo.collage && (this.socialInfo.collage.status == 2 || this.socialInfo.collage.status == 1)) || this.socialInfo.isFriendHelper)
      return isMarketing
    },
    //拼团、限时购展示优惠券
    isFavourable() {
      let isFavourable = this.socialInfo && ((this.socialInfo.bargain && ((this.socialInfo.bargain.status == 1 && this.socialInfo.bargain.isPreheat == 1) || this.socialInfo.bargain.status == 2)) || this.socialInfo.isFriendHelper)
      return isFavourable
    },
    //大转盘是否显示
    showTurn() {
      let showturn = this.socialInfo.joinActivityInfo && this.socialInfo.joinActivityInfo.isJoinActivity == 1
      return showturn;
    }
  },
  methods: {
    hideDialog() {
      this.showAccountQcode = false;
    },
    // 判断是否关注公众号
    checkUserIsFollowedMp() {
      let _this = this;
      return new Promise(function (resolve, reject) {
        utilJs.getMethod(`${global.apiurl}bargains/getMpData?bargainId=${_this.socialInfo.bargain.bargainId}`,
          res => {
            resolve(res);
          },
          failRes => {
            reject(failRes)
          }
        )
      })
    },
    handleClickBargainDetail(bargainId) {
      let pId = this.isSales ? this.socialInfo.sales.pId : null;
      let ckFrom = this.isSales ? global.ckFrom.flashSalesSocial : global.ckFrom.social;
      if (this.socialInfo.bargain.status == 1) {
        this.$showCjToast({
          text: '活动未开始，暂不能砍价！',
          type: 'warn'
        });
        return;
      }
      this.checkUserIsFollowedMp().then(res => {
        if (res.threshold == 2 && res.isFollowedMp == 0) {
          this.mpQrcode = res.mpQrcode;
          this.showAccountQcode = true;
          return;
        }
        // 判断是否绑定手机号
        if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind) {
          if (utilJs.goBindMobile()) return;
        }
        // 有关联表单，则跳到报名表单处
        if (this.socialInfo.userRole * 1 < 2 && this.socialInfo.collectPage == 1 && this.socialInfo.isRelForm && !this.socialInfo.hasFormLog && localStorage.getItem("showForm") == 1) {
          let formQuery = {
            cId: -1,
            extId: this.socialInfo.socialRoomId,
            ckFrom: ckFrom,
            isFromInvite: 0,
            pId: pId,
            relType: 16,
            type: 1,
            recRelateId: this.$route.query.recRelateId,
            recType: this.$route.query.recType,
            bargainId: bargainId
          }
          if (this.goodsRoomId) {
            formQuery.goodsRoomId = this.goodsRoomId;
          }
          this.$routerGo(this, "push", { path: '/homePage/form', query: formQuery }); //type 1表示关联产品
          return;
        }
        if (this.socialInfo.bargain.status == 2) {
          this.$routerGo(this, "push", {
            path: "/homePage/bargain/bargainDetail",
            query: {
              bargainId: bargainId
            }
          });
        }
      })
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    //点击进入社群
    clickShowStudyModal() {
      if (this.packageList.length > 1) {
        this.showStudyModal = true;
      } else {
        let item = this.packageList[0];
        if (item.type == 1) {
          let toPath = `/homePage/package/packageDetail?combosId=${item.cId}`;
          this.iosAppRouteChange(toPath);
        } else if (item.type == 2) {
          let toPath = `/homePage/column/columnDetail?cId=-1&ckFrom=${global.ckFrom.column}&extId=${item.columnId}`;
          this.iosAppRouteChange(toPath);
        }
      }
    },
    // 搭配学习列表
    getPackagedList(socialRoomId) {
      let $this = this;
      //此页最多显示2条
      utilJs.getMethod(`${global.apiurl}social/${socialRoomId}/packagedLearningList?page=1&limit=10`, function (res) {
        $this.relatedList = res.data.filter(item => item.status != 0)
        $this.totalRelate = res.total;
      },
        failRes => {
        }
      );
    },
    // 点击更多列表
    goMore() {
      this.$routerGo(this, "push", { path: `/homePage/socialGroup/socialRelatedList?socialRoomId=${this.socialInfo.socialRoomId}&isBuy=${this.socialInfo.isBuy}` });
    },
    //改变typeBar
    changeType(type) {
      if (this.typeBar != type) {
        this.typeBar = type;
      }
      return false;
    },
    closeModal() {
      this.showCoupon = false;
    },
    //获取可以领取的优惠券
    getCouponList: function () {
      if (!this.couponLoading) {
        this.couponLoading = true;
        let $this = this;
        utilJs.getMethod(global.apiurl + 'redeemCodes/getCouponsByRedeemType?courseId=' + this.sId + '&redeemType=94&limit=10&page=' + this.couponPage, function (res) {
          $this.couponLoading = false;
          $this.couponList = $this.couponList.concat(res.data);
          $this.couponPage = res.next_page_url ? ($this.couponPage + 1) : $this.couponPage;
          $this.couponIsPage = res.next_page_url ? true : false;
        },
          failRes => {
            $this.couponLoading = false;
          }
        );
      }
    },
    //活动海报
    invitePoster: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      let ckFrom = global.ckFrom.social;//this.ckFrom;
      let type = this.socialInfo.collage ? 3 : this.socialInfo.sales ? 2 : this.socialInfo.bargain ? 5 : 4;
      let cId = this.socialInfo.isFriendHelper ? this.socialInfo.faId : this.socialInfo.collage ? this.socialInfo.collage.collageId : this.socialInfo.bargain ? this.socialInfo.bargain.bargainId : this.socialInfo.sales.pId;
      let proId = this.sId;
      this.$routerGo(this, "push", { path: '/homePage/spread/spreadPoster', query: { cId: cId, type: type, ckFrom: ckFrom, proId: proId } });
    },
    // // 限时购倒计时
    falshSalesTime(status) {
      if (this.socialInfo.sales) {
        this.socialInfo.sales.sales.status = status
      } else if (this.socialInfo.collage) {
        this.socialInfo.collage.status = status
      } else if (this.socialInfo.isFriendHelper) {
        this.faStatus = status;
      } else if (this.socialInfo.bargain) {
        this.socialInfo.bargain.status = status
      }
    },
    // // 限时购倒计时结束
    finishFlashSales(status) {
      if (this.socialInfo.sales) {
        this.socialInfo.sales.sales.status = status
      } else if (this.socialInfo.collage) {
        this.socialInfo.collage.status = status
      } else if (this.socialInfo.isFriendHelper) {
        this.faStatus = status;
      } else if (this.socialInfo.bargain) {
        this.getGroupInfo(this.sId);
      }
      if (status == 2) {
        this.isSales = true;
      } else {
        this.isSales = false;
      }
      if (status == -1) {
        this.socialInfo.sales = null;
      }
    },
    //友情灌溉倒计时
    friendTimeFn: function () {
      let stime = this.socialInfo ? utilJs.getTimeByDate(this.socialInfo.faStartAt) : 0;
      let etime = this.socialInfo ? utilJs.getTimeByDate(this.socialInfo.faEndAt) : 0;
      let nowTime = (new Date()).getTime();
      //faStatus 1未开始,2进行中,3已结束,4已停止
      let time = '';
      if (stime > nowTime) {
        this.faStatus = 1;
        time = this.socialInfo.faStartAt;
      } else if (etime > nowTime) {
        this.faStatus = 2;
        time = this.socialInfo.faEndAt;
      }
      return time;
    },
    //友情灌溉倒计时结束修改状态
    friendFinishFn: function () {
      if (this.faStatus == 1) {
        this.faStatus = 2;
        this.friendTimeFn();
      } else {
        this.socialInfo.isFriendHelper = false;
        this.faStatus = 3;
      }
    },
    //助力详情
    goHelpDetail: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.helpBind && utilJs.goBindMobile()) {
        return
      }
      if (this.faStatus == 1) {
        this.$showCjToast({
          text: '活动未开始，暂不能助力领取！',
          type: 'warn'
        });
      } else {
        this.$routerGo(this, "push", {
          path: "/homePage/task/task",
          query: { 'faId': this.socialInfo.faId, 'refereeId': localStorage.getItem("userId") }
        });
      }
    },
    gcd: function (cinfo) {
      console.log('44444444444')
      this.goCollageDetail(cinfo.groupId, cinfo.collageId);
    },
    //拼团详情
    goCollageDetail: function (groupId, collageId) {
      if (this.socialInfo.collage.userType != -1 && this.socialInfo.collage.groupId != groupId) {
        this.$showCjToast({
          text: '您已在拼团中，不需要再去拼单啦！',
          type: 'warn'
        });
      } else {
        if (this.socialInfo.collage.status == 1) {
          this.$showCjToast({
            text: '活动未开始，暂不能拼团！',
            type: 'warn'
          });
        } else {
          let pathQuery = {
            'groupId': groupId,
            'collageId': collageId,
            extId: this.sId,
            recRelateId: this.$route.query.recRelateId,
            recType: this.$route.query.recType,
            relType: 16,
          };
          if (this.goodsRoomId) {
            pathQuery.goodsRoomId = this.goodsRoomId;
          }
          this.$routerGo(this, "push", {
            path: "/homePage/collage/collageDetail",
            query: pathQuery
          });
        }
      }
    },
    //拼团详情
    goBuy: function (groupId, collageId) {
      if (this.socialInfo.collage.userType != -1 && this.socialInfo.collage.groupId != groupId) {
        this.$showCjToast({
          text: '您已在拼团中，不需要再去拼单啦！',
          type: 'warn'
        });
      } else {
        if (this.socialInfo.collage.status == 1) {
          this.$showCjToast({
            text: '活动未开始，暂不能拼团！',
            type: 'warn'
          });
        } else {
          //要加判断是否选择阶梯
          if (this.socialInfo.collage && this.socialInfo.collage.collageGroupType == 1 ) {
            this.$refs.collageGrades.goChoseBuy()
          } else {
            this.$refs.collageGrades.showBuy()
            // this.isShowBuy = true; //选择阶梯
          }
        }
      }
    },
    changePsw() {
      this.noticeText = "";
    },
    //显示密码输入框
    clickEnterPwd() {
      if (this.socialInfo.isRemove == 1) {
        this.$cjConfirm({
            showCancelButton: false,
            message: `您暂无权限进入社群！请联系管理员！`,
        });
        return;
      }
      if (this.bindPhoneSetting && this.bindPhoneSetting.passwordBind) {
        if (utilJs.goBindMobile()) return;
      }
      // 有关联表单，则跳到报名表单处
      if (this.socialInfo.collectPage != 3 && this.socialInfo.isRelForm && this.socialInfo.userRole < 2 && !this.socialInfo.hasFormLog && localStorage.getItem("showForm") == 1) {
        let pathQuery = {
          cId: -1,
          extId: this.socialInfo.socialRoomId,
          ckFrom: global.ckFrom.social,
          isFromInvite: 0,
          pId: -1,
          relType: 16,
          type: 1,
          recRelateId: this.$route.query.recRelateId,
          recType: this.$route.query.recType,
          joinType: 1
        }
        this.$routerGo(this, "push", { path: '/homePage/form', query: pathQuery }); //type 1表示关联产品
        return;
      }
      this.noticeText = "";
      this.showPassword = true;
    },
    //提交密码
    submitPassword(inputPwd) {
      if (this.socialInfo.isBuy == 0) {
        this.addSocialRoom(inputPwd);
      } else {
        this.enterPwdSocialRoom(inputPwd);
      }
    },

    //进入邀请卡
    goSpread() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      if (this.socialInfo.isInvite == 1) {
        this.$routerGo(this, "push", {
          path: "/homePage/spread/spreadCustom",
          query: {
            // socailId: this.socialInfo.socialRoomId
            ckFrom: global.ckFrom.social,
            cId: 0,
            extId: this.socialInfo.socialRoomId
          }
        });
      } else {
        this.isShowShare = true;
      }
    },

    //输入新密码进入社群
    enterPwdSocialRoom(inputPwd) {
      if (isClick) {
        return;
      }
      isClick = true;
      utilJs.postMethod(global.apiurl + "social/checkPassword", {
        encrypt: inputPwd,
        socialRoomId: this.socialInfo.socialRoomId,
        refereeId: localStorage.getItem("refereeId")
      },
        res => {
          isClick = false;
          if (res.code == 500) {
            this.noticeText = "*密码错误";
          } else {
            this.showPassword = false;
            this.enterChatRoom();
          }
        },
        failRes => {
          isClick = false;
        }
      );
    },
//跳转至大转盘
    goTOturn() {
      let $this = this
      $this.$routerGo($this, "push", {
        path: "/homePage/marketing/turntable",
        query: {
          taId: $this.socialInfo.joinActivityInfo.activityData.id
        }
      });
    },
    //获取社群详情
    getGroupInfo(socialRoomId) {
      let $this = this
      utilJs.getMethod(
        global.apiurl + "social/socialDetail/" + socialRoomId + "?isSkeleton=1&time=" + new Date().getTime(),
        res => {
          if (res.statusCode) {
            this.$routerGo(this, "replace", {
              path: "/error/emptyPage",
              query: {
                info: res.statusCode == 400 ? "很抱歉，该社群已下架" : "很抱歉，该社群已解散"
              }
            });
          } else {
            if (res.isBuy && res.isCombos == 1) {
              let postData = {
                "socialRoomId": socialRoomId,
                "isCombos": 61,
                "refereeId": localStorage.getItem("refereeId")
              };
              this.addSocailPost(postData);
              res.isBuy = 1;
            }
            res.deductiblePoints = res.point; // 兼容字段
            this.socialInfo = res;
            this.vipType = res.vipType;
            // optimalPriceType：1 产品本身价格 2 vip价格 3 svip价格 4 服务商 101 限时购 102 拼团 112 砍价  10 链动会员 20 链动代理商 99 链动复购
            this.optimal = res.optimal || null;
            this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
            setDocumentTitle(res.name);// eslint-disable-line
            setTimeout(() => {
              this.showProtoIncome = true;
            }, 100);
            if ($this.socialInfo.joinActivityInfo && $this.socialInfo.joinActivityInfo.isShowDialog == 1) {
              $this.$cjConfirm({
                title: '', //
                titleCenter: true, //标题是否居中
                message: '恭喜！您获得了大转盘抽奖机会！',
                messageCenter: true, //内容是否居中
                showMasker: true, //是否显示透明背景
                clickCloseModal: false, //是否点击透明背景关闭弹窗
                showCancelButton: true, //是否显示取消按钮
                cancelButtonText: '稍后再说', //取消按钮文本
                confirmButtonText: '立刻前往', //确认按钮文本
                onConfirm() {
                  $this.$routerGo($this, "push", {
                    path: "/homePage/marketing/turntable",
                    query: {
                      taId: $this.socialInfo.joinActivityInfo.activityData.id
                    }
                  });
                }
              })
            }
            // 拼团
            if (res.collage != null && this.companyAuth.enableCollage == 1) {
              let nt = (new Date()).getTime();
              let st = utilJs.getTimeByDate(res.collage.startTime);
              let et = utilJs.getTimeByDate(res.collage.endTime);
              if (nt >= st && nt < et && res.collage.status < 3) {
                this.socialInfo.collage.status = 2;
              } else if (nt < st && res.collage.status == 1) {
                this.socialInfo.collage.status = 1;
              } else if (nt >= et && res.collage.status == 2) {
                this.socialInfo.collage.status = 3;
                this.socialInfo.collage = null;
              } else {
                this.socialInfo.collage = null;
              }
            } else {
              this.socialInfo.collage = null;
            }
            if (res.isFriendHelper) { //友情灌溉
              let stime = this.socialInfo ? utilJs.getTimeByDate(this.socialInfo.faStartAt) : 0;
              let etime = this.socialInfo ? utilJs.getTimeByDate(this.socialInfo.faEndAt) : 0;
              let nowTime = (new Date()).getTime();
              //faStatus 1未开始,2进行中,3已结束,4已停止
              if (stime > nowTime) {
                this.faStatus = 1;
              } else if (etime > nowTime) {
                this.faStatus = 2;
              }
            } else if (res.sales != null && res.sales.status && (res.sales.limit == 0 || res.sales.balance > 0) && this.companyAuth.enableFlashSalesModule == 1) {
              let nt = (new Date()).getTime();
              let st = utilJs.getTimeByDate(res.sales.sales.startTime);
              let et = utilJs.getTimeByDate(res.sales.sales.endTime);
              if (nt >= st && nt < et && this.socialInfo.sales.sales.status > -1) {
                this.isSales = true;
                this.socialInfo.sales.sales.status = 2;
              } else if (nt < st && this.socialInfo.sales.sales.status == 1) {
                this.isSales = false;
                this.socialInfo.sales.sales.status = 1;
                // this.socialInfo.sales = null;
              } else if (nt >= et && this.socialInfo.sales.sales.status == 2) {
                this.socialInfo.sales.sales.status = -1;
                this.socialInfo.sales = null;
              } else {
                this.socialInfo.sales = null;
              }
            } else {
              this.socialInfo.sales = null;
            }
            this.wechatShare();
            // let title = res.shareTitle || res.name;
            // if (this.socialInfo.sales) {
            //   title = '【限时抢购】' + title;
            // }
            // if (this.companyAuth.enableFriendHelper == 1 && this.socialInfo.isFriendHelper) {
            //   title = '【快来帮我灌溉吧】' + title;
            // }
            // let shareImg = this.socialInfo.sales && this.socialInfo.sales.shareImg ? this.socialInfo.sales.shareImg : res.avatar;
            // let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?SocialRoomId=${this.socialInfo.socialRoomId}&refereeId=${localStorage.getItem("userId")}`;
            // let shareDesc = res.shareDesc || "点击查看详情";
            // utilJs.wechatConfig(
            //   shareUrl,
            //   title,
            //   shareImg,
            //   shareDesc,
            //   function () { }
            // );
          }
          if (res.sales && res.sales.sales) {
            this.isSalesBegin = (res.sales.sales.startTime).replace(/\s+|[-]|[:]/g, "") <= (utilJs.getNowTime()).replace(/\s+|[-]|[:]/g, "") ? true : false;
          }
        }
      );
    },
    wechatShare: function () {
      let title = this.socialInfo.shareTitle || this.socialInfo.name;
      let shareImg = this.socialInfo.sales && this.socialInfo.sales.shareImg ? this.socialInfo.sales.shareImg : this.socialInfo.avatar;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?SocialRoomId=${this.socialInfo.socialRoomId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.socialInfo.shareDesc || "点击查看详情";
      if (this.socialInfo.sales) {
        title = '【限时抢购】' + title;
      }
      if (this.companyAuth.enableFriendHelper == 1 && this.socialInfo.isFriendHelper) {
        title = '【快来帮我灌溉吧】' + title;
      }
      if (this.socialInfo.bargain != null && ((this.socialInfo.bargain.status == 1 && this.socialInfo.bargain.isPreheat == 1) || this.socialInfo.bargain.status == 2)) {
        title = `【邀您一起砍价】${title}`;
      }
      if (this.socialInfo.collage != null && (this.socialInfo.collage.status == 2 || this.socialInfo.collage.status == 1)) {
        title = `【邀您一起拼团】${title}`;
      }
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.socialInfo.shareTitle || this.socialInfo.name;
      if (this.socialInfo.sales) {
        title = '【限时抢购】' + title;
      }
      let shareImg = this.socialInfo.sales && this.socialInfo.sales.shareImg ? this.socialInfo.sales.shareImg : this.socialInfo.avatar;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?SocialRoomId=${this.socialInfo.socialRoomId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.socialInfo.shareDesc || "点击查看详情";
      if (this.companyAuth.enableFriendHelper == 1 && this.socialInfo.isFriendHelper) {
        title = '【快来帮我灌溉吧】' + title;
      }
      if (this.socialInfo.bargain != null && ((this.socialInfo.bargain.status == 1 && this.socialInfo.bargain.isPreheat == 1) || this.socialInfo.bargain.status == 2)) {
        title = `【邀您一起砍价】${title}`;
      }
      if (this.socialInfo.collage != null && (this.socialInfo.collage.status == 2 || this.socialInfo.collage.status == 1)) {
        title = `【邀您一起拼团】${title}`;
      }
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    //添加进社群
    addSocialRoom(pwd) {
      let postData = {
        encrypt: pwd || "",
        socialRoomId: this.socialInfo.socialRoomId,
        refereeId: localStorage.getItem("refereeId")
      };
      if (this.socialInfo.isCombos) {
        postData.isCombos = 61;
      }
      this.addSocailPost(postData).then(res => {
        this.enterChatRoom();
      });
    },

    addSocailPost(postData) {
      var $this = this;
      return new Promise(function (resolve, reject) {
        if (isClick) {
          return;
        }
        isClick = true;
        utilJs.postMethod(
          global.apiurl + "social/addSocialRoom", postData,
          res => {
            isClick = false;
            if (res.code == 500) {
              $this.noticeText = "*密码错误";
            } else {
              resolve();
              $this.showPassword = false;
            }
          },
          failRes => {
            isClick = false;
            reject(failRes);
          }
        );
      });
    },

    //点击进入聊天
    clickGoIn(e) {
      if (this.socialInfo.isFull == 1 && this.socialInfo.isBuy == 0) {
        return;
      }
      if (this.socialInfo.isRemove == 1) {
        this.$cjConfirm({
            showCancelButton: false,
            message: `您暂无权限进入社群！请联系管理员！`,
        });
        return;
      }
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
        if (utilJs.goBindMobile()) return;
      }
       // 有关联表单，则跳到报名表单处
      const TEACHER_ROLE_ARR = [2, 4, 6];
      if (!TEACHER_ROLE_ARR.includes(this.socialInfo.userRole * 1) && (this.socialInfo.collectPage == 2 || this.socialInfo.price == 0 || this.socialInfo.needPwd) && this.socialInfo.collectPage != 3 && this.socialInfo.isRelForm && !this.socialInfo.hasFormLog && localStorage.getItem("showForm") == 1) {
        let pathQuery = {
          cId: -1,
          extId: this.socialInfo.socialRoomId,
          ckFrom: global.ckFrom.social,
          isFromInvite: 0,
          pId: -1,
          relType: 16,
          type: 1,
          recRelateId: this.$route.query.recRelateId,
          recType: this.$route.query.recType,
          joinType: 1
        }
        this.$routerGo(this, "push", { path: '/homePage/form', query: pathQuery }); //type 1表示关联产品
        return;
      }
      if (this.socialInfo.isBuy == 0) {
        if (this.socialInfo.isSaleOnly == 0 && this.socialInfo.isSaleTogether == 1) {
          if (this.packageList.length == 0) {
            this.$cjConfirm({
                showCancelButton: false,
                message: `关联套餐已下架或删除！`,
            });
          } else {
            this.showBuyPackageTip();
          }
        } else {
          this.addSocialRoom();
        }
      } else if (this.socialInfo.isBuy == 1 && this.socialInfo.isInSocial == 0) {
        this.addSocialRoom();
      } else {
        this.enterChatRoom();
      }
    },
    showBuyPackageTip() {
      this.$cjConfirm({
        title:'温馨提示',
        showCancelButton: false,
        message: `需购买配套课程后，方可免费加入社群`,
        onConfirm:() => {
          this.clickShowStudyModal();;
        }
      });
    },
    goForm() {
      // 有关联表单，则跳到报名表单处
      if (this.socialInfo.isRelForm && (!this.socialInfo.hasFormLog || (this.socialInfo.hasFormLog && this.socialInfo.enableEdit == 2)) && localStorage.getItem("showForm") == 1) {
        let pId = this.isSales ? this.socialInfo.sales.pId : null;
        let ckFrom = this.isSales ? global.ckFrom.flashSalesSocial : global.ckFrom.social;
        let isGoBack = this.socialInfo.price * 1 == 0 || this.socialInfo.isBuy == 1 || this.socialInfo.needPwd == 1 || (this.isMarketing && !this.socialInfo.sales) || this.socialInfo.isSaleOnly == 0 ? 1 : 0;
        let formQuery = {
          cId: -1,
          extId: this.socialInfo.socialRoomId,
          ckFrom: ckFrom,
          isFromInvite: 0,
          pId: pId,
          relType: 16,
          type: 1,
          isGoBack:isGoBack,
          recRelateId: this.$route.query.recRelateId,
          recType: this.$route.query.recType
        }
        if (this.goodsRoomId) {
          formQuery.goodsRoomId = this.goodsRoomId;
        }
        this.$routerGo(this, "push", { path: '/homePage/form', query: formQuery }); //type 1表示关联产品
        return;
      }
    },
    //点击立即购买
    clickBuyNow(e) {
      // 判断体验版是否到期，到期之后不可购买商品
      if (utilJs.alertShopExpire(this, utilJs.getTimeByDate(this.companyAuth.expireTime))) return true;
      if (this.socialInfo.isFull == 1) {
        return;
      }
      if (this.socialInfo.isRemove == 1) {
        this.$cjConfirm({
            showCancelButton: false,
            message: `您暂无权限进入社群！请联系管理员！`,
        });
        return;
      }
      if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind) {
        let pathQuery = {};
        if (this.goodsRoomId) {
          pathQuery.goodsRoomId = this.goodsRoomId;
        }
        if (utilJs.goBindMobile(pathQuery)) return;
      }
      let ckFrom = global.ckFrom.social;
      let pathQuery = {
        extId: this.socialInfo.socialRoomId,
        ckFrom: ckFrom,
        isFromInvite: 0,
        cId: -1,
      };
      if (this.goodsRoomId) {
        pathQuery.goodsRoomId = this.goodsRoomId;
      }
      // 有关联表单，则跳到报名表单处
      if (this.socialInfo.userRole * 1 < 2 && this.socialInfo.collectPage == 1 && this.socialInfo.isRelForm && !this.socialInfo.hasFormLog && localStorage.getItem("showForm") == 1) {
        let formQuery = {
          cId: -1,
          extId: this.socialInfo.socialRoomId,
          ckFrom: ckFrom,
          isFromInvite: 0,
          relType: 16,
          type: 1,
          recRelateId: this.$route.query.recRelateId,
          recType: this.$route.query.recType
        }
        if (this.goodsRoomId) {
          formQuery.goodsRoomId = this.goodsRoomId;
        }
        if (this.isSales && this.optimal && this.optimal.optimalPriceType == 101) {
          formQuery.pId = this.socialInfo.sales.pId;
          formQuery.ckFrom = global.ckFrom.flashSalesSocial;
        }
        this.$routerGo(this, "push", { path: '/homePage/form', query: formQuery }); //type 1表示关联产品
        return;
      }
      if (this.isSales && this.optimal && this.optimal.optimalPriceType == 101) {
        pathQuery.pId = this.socialInfo.sales.pId;
        pathQuery.ckFrom = global.ckFrom.flashSalesSocial;
      }
      this.$routerGo(this, "push", {
        path: "/homePage/course/coursePay",
        query: pathQuery
      });
    },
    enterChatRoom() {
      this.$routerGo(this, "push", {
        path: "/homePage/socialGroup/chatRoom",
        query: {
          SocialRoomId: this.socialInfo.socialRoomId,
        }
      });
    },
    getRelatePackage() {
      let $this = this;
      utilJs.getMethod(global.apiurl + "combos/showRel?proId=" + this.sId + '&proType=7', function (res) {
        $this.packageList = res;
        if ($this.packageList.length > 0 && $this.companyAuth.enableComboModule == 1) {
          $this.tabList = [{
            title: '详情',
            index: 0,
          }, {
            title: '相关推荐',
            index: 1,
          }];
        }
      });
    },
    //设置默认头像
    setDefultImg(e) {
      this.socialInfo.avatar = require("../../../assets/defult_head.png");
    }
  },
  activated() {
    setDocumentTitle("社群信息");// eslint-disable-line
    isClick = false;
    this.isShowShare = false;
    this.showPassword = false; //显示密码输入
    this.socialInfo = {
      socialRoomId: "",
      jgChatRoomId: "",
      name: "",
      intro: "",
      avatar: "",
      number: 0,
      price: 1,
      vipDiscount: "100.00",
      svipDiscount: "100.00",
      vipType: 1,
      isBuy: 0,
      isFull: false,
      joinActivityInfo: []
    };
    this.recRelateId = this.$route.query.recRelateId || '',
    this.recType = this.$route.query.recType || '',
    this.packageList = [];
    let socialRoomId = this.$route.query.SocialRoomId || "";
    this.goodsRoomId = this.$route.query.goodsRoomId || "";
    this.sId = socialRoomId;
    this.faStatus = 1;
    this.cloroRGB = THEME_RGB_MAP[this.theme];
    this.couponPage = 1;
    this.couponIsPage = false;
    this.couponLoading = false;
    this.showCoupon = false;
    this.couponList = [];
    this.relatedList = [];
    this.totalPackaged = '';
    this.showStudyModal = false;
    this.isSales = false;
    this.showProtoIncome = false;
    this.optimal = null;
    this.tabList = [{
      title: '详情',
      index: 0,
    }];
    getBindPhoneSetting(global.ckFrom.social).then(res => {
      this.bindPhoneSetting = res;
    });
    this.getGroupInfo(socialRoomId);
    // this.getPackagedList(socialRoomId);
    this.getRelatePackage();
    this.getCouponList();
  },
  deactivated() {
    this.showProtoIncome = false;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.c-pt126{padding-top: 3.15rem;}
.c-mt-80{
  margin-top: -2rem;
}
.socail-name {
  color: #1b1b1b;
}

.invite-friend {
  top: 3.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  background: #fff;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
  opacity: 0.9;
  border-radius: 25px 0px 0px 25px;
}
.yqAnimation {
  animation: yqAni 3s linear infinite;
  -webkit-animation: yqAni 3s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
@keyframes yqAni {
  0% {
    width: 0.4rem;
  }
  8% {
    width: 0;
  }
  16% {
    width: 0.4rem;
  }
  100% {
    width: 0.4rem;
  }
}
.room-guide {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
.left-bg {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  height: 0.75rem;
  background: linear-gradient(90deg,#333333, rgba(51,51,51,0.7) 100%);
  border-radius: 0.15rem 0px 0.5rem 0.15rem;
  color: #F5D199;
}
.coupon-item {
  position: absolute;
  border: none;
  color: #333;
  border-radius: 0.15rem;
}
.coupon-item:after{
  border-radius: 0.25rem;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #333;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}
.btn-wrap > div:first-child {
  color: #ff8831;
  color: var(--mb7color);
  background-color: rgba(255, 99, 45, 0.1);
  background-color: var(--rgba10color);
  border-bottom-left-radius: 0.9rem;
  border-top-left-radius: 0.9rem;
  border: 1px solid #ff8831;
  border: 1px solid var(--mb7color);
}
.btn-wrap > div:nth-child(2) {
  color: white;
  background-color: rgba(255, 99, 45, 0.5);
  background-color: var(--rgba50color);
  border-top: 1px solid #ff8831;
  border-top: 1px solid var(--mb7color);
  border-bottom: 1px solid #ff8831;
  border-bottom: 1px solid var(--mb7color);
}
.btn-wrap > div:last-child {
  color: white;
  background-color: #ff8831;
  background-color: var(--mb7color);
  border-bottom-right-radius: 0.9rem;
  border-top-right-radius: 0.9rem;
  border: none;
  border-top: none;
  border-bottom: none;
}
.theme-market .btn-wrap > div:first-child {
  background-color: var(--rgba10MarketColor);
  border: 1px solid var(--marketColor1);
  color: var(--marketColor1);
}
.theme-market .btn-wrap > div:nth-child(2) {
  background-color: var(--rgba50MarketColor);
  border-top: 1px solid var(--marketColor1);
  border-bottom: 1px solid var(--marketColor1);
  color: var(--marketColor1);
}
.theme-market .btn-wrap > div:last-child {
  background-image: -webkit-linear-gradient(0, var(--marketColor2) 0%, var(--marketColor1) 100%);
  color: #FFFFFF;
}
.bg-filter{
    background-color: rgba(0, 0, 0, 0.3);
}
.bg-filter img{
  object-fit: fill;
    filter: blur(1rem);
}
.banner-filter:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}
</style>
